Angular অ্যাপে Google Charts বা অন্য কোনো ধরনের চার্টের টেস্টিং করা একটি গুরুত্বপূর্ণ বিষয়, বিশেষত যখন আপনি ডাইনামিক ডেটা ব্যবহার করেন বা একাধিক চার্ট একত্রে প্রদর্শন করেন। Chart Testing এমন একটি প্রক্রিয়া যেখানে আপনি নিশ্চিত করেন যে চার্ট সঠিকভাবে রেন্ডার হচ্ছে এবং ডেটা সঠিকভাবে প্রদর্শিত হচ্ছে।

এখানে, আমরা Angular অ্যাপে Google Charts এর টেস্টিং টেকনিকগুলো নিয়ে আলোচনা করব। Angular এর সাথে Jasmine এবং Karma টেস্টিং ফ্রেমওয়ার্ক ব্যবহার করে চার্টের ভ্যালিডেশন এবং টেস্টিং করা যাবে।

Step-by-Step: Angular Chart Testing

Step 1: Angular Test Setup

প্রথমে আপনার অ্যাপে টেস্টিং সিস্টেম সেটআপ করতে হবে। Jasmine এবং Karma স্বাভাবিকভাবে Angular CLI-এর সাথে অন্তর্ভুক্ত থাকে। আপনি যদি Angular CLI ব্যবহার করে প্রজেক্ট তৈরি করে থাকেন, তবে টেস্টিং সেটআপ স্বয়ংক্রিয়ভাবে হয়ে যাবে।

টেস্টিং চালানোর জন্য কমান্ডটি ব্যবহার করুন:

ng test

এই কমান্ডটি Karma ব্যবহার করে টেস্টগুলি চালাবে এবং Jasmine এর সাহায্যে পরীক্ষাগুলি সম্পন্ন হবে।

Step 2: Chart Rendering Test

প্রথমত, আমাদের চার্ট রেন্ডার হচ্ছে কিনা তা পরীক্ষা করা দরকার। আমরা একটি সহজ টেস্ট লিখব যা নিশ্চিত করবে যে চার্ট কম্পোনেন্টটি সঠিকভাবে রেন্ডার হচ্ছে।

Chart Component Test Example:

ধরা যাক, আমরা একটি Pie Chart কম্পোনেন্টের জন্য টেস্ট তৈরি করছি। এখানে আমরা টেস্ট করব যে Google Chart কম্পোনেন্ট সঠিকভাবে রেন্ডার হচ্ছে কিনা।

app.component.ts ফাইল (Chart Component):

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Chart Testing Example';

  chartType = 'PieChart'; // Chart Type
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Chart Data

  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4,
    width: '100%',
    height: 400
  };
}

app.component.html (Chart Template):

<h1>{{ title }}</h1>

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

Chart Rendering Test (app.component.spec.ts):

এখন, আমরা এই কম্পোনেন্টের জন্য একটি টেস্ট লিখব যা নিশ্চিত করবে যে চার্ট সঠিকভাবে রেন্ডার হচ্ছে।

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts';
import { By } from '@angular/platform-browser';

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [GoogleChartsModule],
      declarations: [AppComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should render the Google Chart component', () => {
    const chartElement = fixture.debugElement.query(By.css('google-chart'));
    expect(chartElement).toBeTruthy(); // Check if the chart element is rendered
  });
});

ব্যাখ্যা:

• TestBed.configureTestingModule(): Angular টেস্ট মডিউল তৈরি করে এবং প্রোজেক্টের প্রয়োজনীয় মডিউল এবং কম্পোনেন্ট ইমপোর্ট করে।
• fixture.debugElement.query(): google-chart কম্পোনেন্টটি DOM এ আছে কিনা তা চেক করে।
• expect(chartElement).toBeTruthy(): এটি নিশ্চিত করে যে কম্পোনেন্টটি রেন্ডার হচ্ছে এবং google-chart কম্পোনেন্টটি DOM এ উপস্থিত।

Step 3: Chart Data Validation Test

আপনি চাইলে Chart Data এর সঠিকতা যাচাই করতে পারেন। আমরা নিশ্চিত করতে পারি যে chartData সঠিকভাবে রেন্ডার হচ্ছে এবং পরিবর্তন হলে তা চার্টে প্রতিফলিত হচ্ছে।

Data Validation Test (app.component.spec.ts):

it('should correctly render chart data', () => {
  const pieChartData = component.chartData;
  expect(pieChartData).toEqual([
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]); // Checking if the chart data is correct
});

ব্যাখ্যা:

• এখানে chartData টেস্ট করা হয়েছে যে এটি সঠিকভাবে সঠিক ডেটার সাথে মেলে কিনা।
• expect(pieChartData).toEqual(): এটি যাচাই করে যে chartData অ্যারে সঠিক এবং প্রত্যাশিত ডেটার সাথে মেলে।

Step 4: Chart Interaction Testing

যদি আপনার চার্টে কোনো ইন্টারঅ্যাকটিভ ফিচার থাকে যেমন টুলটিপ, ক্লিক ইভেন্ট বা ড্র্যাগ অ্যান্ড ড্রপ, তাহলে এগুলো টেস্ট করা খুবই গুরুত্বপূর্ণ। এখানে, আমরা একটি click ইভেন্ট হ্যান্ডলার পরীক্ষা করব।

Interaction Test (app.component.spec.ts):

it('should trigger click event on chart', () => {
  const spy = spyOn(component, 'onChartClick'); // Create a spy for the onChartClick method
  const chartElement = fixture.debugElement.query(By.css('google-chart'));
  chartElement.triggerEventHandler('click', null); // Simulate a click event

  expect(spy).toHaveBeenCalled(); // Ensure the onChartClick method was called
});

ব্যাখ্যা:

• এখানে, আমরা onChartClick মেথডের জন্য একটি স্পাই তৈরি করেছি এবং এটি যাচাই করেছি যে click ইভেন্ট ট্রিগার হলে এটি কল হবে।

Step 5: Async Data Testing

যদি আপনার চার্টে Async Data ব্যবহৃত হয়, যেমন API থেকে ডেটা ফেচ করা হয়, তবে আপনি async টেস্ট ব্যবহার করতে পারেন। এখানে, আমরা HTTP Request থেকে আসা ডেটা ব্যবহার করে টেস্টিং করব।

Async Data Test (app.component.spec.ts):

import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

describe('AppComponent with Async Data', () => {
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [GoogleChartsModule, HttpClientTestingModule],
      declarations: [AppComponent]
    }).compileComponents();

    httpMock = TestBed.inject(HttpTestingController);
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
  });

  it('should fetch chart data asynchronously', () => {
    component.fetchDataFromAPI();
    const req = httpMock.expectOne('https://api.example.com/data'); // Replace with your actual API URL
    expect(req.request.method).toBe('GET'); // Ensure the method is GET
    req.flush({ chartData: [['Work', 7], ['Eat', 3], ['Commute', 2]] }); // Mock the response

    fixture.detectChanges();
    expect(component.chartData).toEqual([['Task', 'Hours per Day'], ['Work', 7], ['Eat', 3], ['Commute', 2]]);
  });
});

ব্যাখ্যা:

• HttpClientTestingModule ব্যবহার করা হয়েছে যাতে আপনি HTTP Request টেস্ট করতে পারেন।
• httpMock.expectOne(): এটি API রিকোয়েস্টের জন্য একটি মক রেসপন্স তৈরি করে।

সারাংশ

Angular অ্যাপে Google Charts টেস্টিং করার জন্য আপনি Jasmine এবং Karma ব্যবহার করতে পারেন। টেস্টিংয়ের মধ্যে Chart Rendering, Data Validation, Chart Interaction, এবং Async Data Fetching টেস্ট করা অন্তর্ভুক্ত। এসব টেস্টের মাধ্যমে আপনি নিশ্চিত করতে পারেন যে আপনার চার্ট সঠিকভাবে রেন্ডার হচ্ছে, ডেটা সঠিক এবং ইন্টারঅ্যাকশনগুলো ঠিকঠাক কাজ করছে।